<script lang="ts" setup>
import {nextTick, onMounted, ref} from 'vue'
// 绑定父元素
let dataAudio = ref<HTMLDivElement>();
// 绑定canvas的元素
let AudioMainCanvas = ref<HTMLCanvasElement>();
// 绑定音频元素
let AudioMainElement = ref<HTMLAudioElement>()

let ctx:any = null;
onMounted(()=>{
    BindMyChart()
})

const BindMyChart = ()=>{
    ctx = AudioMainCanvas.value?.getContext("2d");
    initCvs(AudioMainCanvas.value)
    addEventPlay();
}
function initCvs(canvas?:HTMLCanvasElement & {width:number,height:number}){
    if(!canvas || !dataAudio.value) return;
    
    let {width,height} = dataAudio.value.getBoundingClientRect();

    canvas.width = width;
    canvas.height = height;
    
}
let isInit = false;
let array:Uint8Array,analyser:AnalyserNode;
const addEventPlay = ()=>{
    AudioMainElement.value!.onplay = function(){
        
        if(isInit || !AudioMainElement.value){
            return;
        }

        const audCtx = new AudioContext();  //创建音频上下文
        const source = audCtx.createMediaElementSource(AudioMainElement.value);  //创建音频源节点

        analyser = audCtx.createAnalyser();
        analyser.fftSize = 512;    //必须是2的n次幂
        // //创建数组，来接收分析器节点的分析器数据
        array = new Uint8Array(analyser.frequencyBinCount);
        
        source.connect(analyser);
        analyser.connect(audCtx.destination);

        isInit = true;

        draw()

    }
}

function draw(){
    if(!AudioMainCanvas.value) return;
    const {width,height} = AudioMainCanvas.value;
    ctx.clearRect(0,0,width,height);
    if(!isInit) return;
    requestAnimationFrame(draw);

    analyser.getByteFrequencyData(array);
    let len = array.length / 2;
    const barWidth = width / len / 2;
    // 创建线性渐变
    var grd = ctx.createLinearGradient(width/2, 0, width/2, height/2);
    grd.addColorStop(0, "red");
    grd.addColorStop(0.5, "#FFBF00");
    grd.addColorStop(0.8, "green");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    for(var i=0;i<len;i++){
        const data = array[i];
        const x = i*barWidth;
        const x1 = x + (width / 2);
        const x2 = (width / 2) - x;
        const barHeight = (data / 255) * height;
        const y = height - barHeight;
        ctx.fillRect(x1,y,barWidth-3,barHeight);
        ctx.fillRect(x2,y,barWidth-3,barHeight);
    }
}
// 控制音频的播放
const controlAudio = ()=>{
    if(!AudioMainElement.value) return;
    let audio = AudioMainElement.value;
    if(audio.paused){
        audio.play()
    }else{
        audio.pause()
    }
}
</script>
<template>
    <div class="dataAudio" ref="dataAudio">
        <div class="dataAudioMain" @click="controlAudio">
            <audio style="position: absolute;" src="http://localhost:5173/static/images/1.mp3" ref="AudioMainElement"></audio>
            <canvas id="AudioMainCanvas" ref="AudioMainCanvas" />
        </div>
    </div>
</template>
<style scoped>
    .dataAudio{
        position: absolute;
        left: calc(27% + 9px);
        bottom: 1%;
        width: 45%;
        cursor: pointer;
        height: 19%;
        border-radius: 10px;
        overflow: hidden;
        background-color: rgba(150, 211, 248, 0.81);
    }
</style>